<template>
	<app-layout>
		<view v-if="is_show">
			<view class="refund-box">
				<view class="goods-info">
					<app-jump-button :url="refundDetail.page_url">
						<app-order-goods-info :goods="refundDetail.goods_info" :is-last-one="false"
							:plugin-data="refundDetail.plugin_data" plugin-index="0">
						</app-order-goods-info>
					</app-jump-button>
				</view>
				<view class="content">
					<view class="content-item" v-if="form.type == 3">
						<span class="label">
							货物状态
						</span>
						<view class="select-box" @click="goodsStatus.visible = true">
							<span :class="{'active': form.goods_status, 'no-active': !form.goods_status}"
								class="select-label">
								{{form.goods_status ? goodsStatus.list[goodsStatus.index] : '请选择'}}
							</span>
							<image class="arrow-right" src="/static/image/icon/arrow-right.png">
							</image>
						</view>
					</view>
					<view class="content-item" v-if="form.type != 2">
						<span class="label">
							退款原因
						</span>
						<view class="select-box" @click="refundList.visible = true">
							<span :class="{'active': form.cause, 'no-active': !form.cause}" class="select-label">
								{{form.cause ? refundList.list[refundList.index] : '请选择'}}
							</span>
							<image class="arrow-right" src="/static/image/icon/arrow-right.png">
							</image>
						</view>
					</view>
					<view class="content-item" v-if="form.type == 2">
						<span class="label">
							换货原因
						</span>
						<input class="text" placeholder="请输入换货原因" placeholder-style="color:#999999;font-size:28rpx;"
							v-model="form.cause">
						</input>
					</view>
					<view class="content-item" v-if="form.type != 2">
						<span class="label">
							退款金额
						</span>
						<span v-if="form.refund_price" class="price-label">￥</span>
						<input :placeholder="`最多可退款${refundDetail.refund_price_text}`" class="text price-text"
							placeholder-style="color:#999999;font-size:28rpx;" type="digit" v-model="form.refund_price">
						</input>
					</view>
					<view class="content-item">
						<span class="label">
							备注信息
						</span>
						<input class="text" placeholder="最多可填200个字" placeholder-style="color:#999999;font-size:28rpx;"
							v-model="form.remark">
						</input>
					</view>
					<view class="content-item">
						<span class="label">
							联系方式
						</span>
						<input class="text" placeholder="请填写联系方式，便于卖家联系你 "
							placeholder-style="color:#999999;font-size:28rpx;" type="number" v-model="form.mobile">
						</input>
					</view>
				</view>
				<view class="upload-box">
					<view class="label">
						上传凭证
					</view>
					<app-upload-image :max-num="maxNum" @image-event="imageEvent" background-color="#fff">
					</app-upload-image>
				</view>
				<view style="height: 80rpx;margin-top: 80rpx;">
				</view>
			</view>
			<view class="btn-box">
				<view @click="formSubmit" class="btn main-center cross-center">
					提交
				</view>
			</view>
			<app-select height="264rpx" title="货物状态" :is-show="goodsStatus.visible" :value="goodsStatus.index"
				:list="goodsStatus.list" @confirm="goodsStatusChange"></app-select>
			<app-select title="退款原因" :is-show="refundList.visible" :value="refundList.index" :list="refundList.list"
				@confirm="refundListChange"></app-select>
		</view>
	</app-layout>
</template>
<script>
	import appOrderGoodsInfo from "../../../components/page-component/app-order-goods-info/app-order-goods-info.vue";
	import appUploadImage from "../../../components/basic-component/app-upload-image/app-upload-image.vue";
	import appSelect from "../components/app-select";

	export default {
		components: {
			"app-order-goods-info": appOrderGoodsInfo,
			'app-upload-image': appUploadImage,
			'app-select': appSelect,
		},
		data() {
			return {
				refundDetail: {},
				maxNum: 6, // 图片上传最大数量
				is_show: false,
				form: {
					id: 0,
					type: 0,
					goods_status: '',
					cause: '',
					image_list: [],
					mobile: '',
					remark: '',
					refund_price: '',
				},
				goodsStatus: {
					index: 0,
					visible: false,
					list: [],
				},
				refundList: {
					index: 0,
					visible: false,
					list: [],
				},
				refundCauseList: [],
			}
		},
		methods: {
			getRefundDetail() {
				let self = this;
				self.$showLoading();
				self.$request({
					url: this.$api.order.apply_refund,
					data: {
						id: self.form.id,
					}
				}).then(response => {
					self.$hideLoading();
					self.is_show = true;
					if (response.code === 0) {
						self.refundDetail = response.data.detail;
						self.goodsStatus.list = response.data.list.goods_status;
						self.refundList.list = response.data.list.refund_list.confirm_list;
						self.refundCauseList = response.data.list.refund_list;
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(() => {
					self.$hideLoading();
				});
			},
			formSubmit() {
				let self = this;
				if (!self.form.goods_status && self.form.type == 3) {
					uni.showModal({
						title: '',
						content: '请选择货物状态',
						showCancel: false,
					});
					return;
				}
				if (!self.form.cause) {
					let content = self.form.type == 2 ? '请填写换货原因' : '请选择退款原因';
					uni.showModal({
						title: '',
						content: content,
						showCancel: false,
					});
					return;
				}
				if ((!self.form.refund_price || self.form.refund_price < 0) && self.form.type != 2) {
					uni.showModal({
						title: '',
						content: '请填写退款金额',
						showCancel: false,
					});
					return;
				}

				if (!self.form.remark) {
					uni.showModal({
						title: '',
						content: '请填写备注信息',
						showCancel: false,
					});
					return;
				}

				if (!self.form.mobile) {
					uni.showModal({
						title: '',
						content: '请填写联系方式',
						showCancel: false,
					});
					return;
				}
				this.$subscribe(this.refundDetail.template_message_list).then(response => {
					self.submitAction();
				}).catch(res => {
					self.submitAction();
				});
			},
			submitAction() {
				let self = this;

				uni.showLoading({
					title: '提交中'
				});
				let refundPrice = self.form.type == 2 ? 0 : self.form.refund_price;
				self.$request({
					url: self.$api.order.refund_submit,
					method: "post",
					data: {
						id: self.form.id,
						type: self.form.type,
						pic_list: JSON.stringify(self.form.image_list),
						refund_price: refundPrice,
						remark: this.form.remark,
						mobile: this.form.mobile,
						cause: this.form.cause,
						goods_status: this.form.goods_status,
					},
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						uni.redirectTo({
							url: '/pages/order/refund/index'
						})
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			imageEvent(e) {
				this.form.image_list = e.imageList;
			},
			goodsStatusChange(e) {
				if (!e.is_modal_confirm) {
					this.goodsStatus.index = e.index;
					this.form.goods_status = this.goodsStatus.list[this.goodsStatus.index];

					if (this.goodsStatus.index == 0) {
						this.refundList.list = this.refundCauseList.not_confirm_list;
					} else {
						this.refundList.list = this.refundCauseList.confirm_list;
					}
					this.form.cause = '';
				}
				this.goodsStatus.visible = false;
			},
			refundListChange(e) {
				if (!e.is_modal_confirm) {
					this.refundList.index = e.index;
					this.form.cause = this.refundList.list[this.refundList.index];
				}
				this.refundList.visible = false;
			},
			// 设置页面标题
			setPageTitle() {
				let title = '订单售后';
				if (this.form.type == 1) {
					title = '退货退款'
				} else if (this.form.type == 2) {
					title = '换货';
				} else if (this.form.type == 3) {
					title = '仅退款';
				}
				uni.setNavigationBarTitle({
					title: title
				});
			},
		},
		onLoad(options) {
			this.form.id = options.id;
			this.form.type = options.type;
			this.getRefundDetail();
		},
		onReady() {
			this.setPageTitle();
		}
	}
</script>
<style lang="scss" scoped="">
	.refund-box {
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 24#{rpx};

		.goods-info {
			background: #ffffff;
			border-radius: 16#{rpx};
			padding: 28#{rpx};
			margin-bottom: 24#{rpx};
		}

		.upload-box {
			background: #ffffff;
			border-radius: 16#{rpx};
			padding:28#{rpx};
			display: flex;
			flex-direction: column;
			margin-top:24#{rpx};

			.label {
				font-size: 28#{rpx};
				color: #353535;
				margin-bottom:20#{rpx};
			}
		}

		.content {
			margin-top:24#{rpx};
			padding:0 28#{rpx};
			background: #ffffff;
			border-radius: 16#{rpx};
			display: flex;
			flex-direction: column;

			.content-item {
				display: flex;
				height: 88#{rpx};
				align-items: center;
				border-bottom:1#{rpx} solid #e2e2e2;

				.label {
					font-size:28#{rpx};
					color: #353535;
					width: 152#{rpx};
				}

				.text {
					color: #353535;
					font-size:28#{rpx};
					flex-grow: 1;
				}

				.price-text {
					color: #ff4544;
				}

				.price-label {
					font-size:28#{rpx};
					color: #ff4544;
				}
			}

			.content-item:last-child {
				border-bottom: 0;
			}

			.select-box {
				display: flex;
				align-items: center;
				width: 100%;

				.select-label {
					font-size:28#{rpx};
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					display: inline-block;
					text-align: right;
				}

				.no-active {
					color: #999999;
				}

				.active {
					color: #353535;
				}

				.arrow-right {
					width: 12#{rpx};
					height: 22#{rpx};
					margin-left: 16#{rpx};
				}
			}
		}
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 24#{rpx};
		background: #f7f7f7;
		z-index: 999;

		.btn {
			border-radius: 40#{rpx};
			height: 80#{rpx};
			background: #ff4544;
			padding: 24#{rpx} 0;
			color: #ffffff;
			font-size: 32#{rpx};
		}
	}
</style>
